<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>我的订单</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<style type="text/css">
	
	</style>
	<script type="text/javascript">
		var appId = '${appId}';
		var mobile = '${user.mobile}';
		var ctxFront = "${ctxFront}";
		var ctxShop = "${ctxShop}";
		$(document).ready(function() {
			if(!($global_isIPad || $global_isIPhone)){
				$("label[id='detailAmount']").each(function(){
					$(this).css("margin-right","0em");
				});
			}
			$("#listForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		
		function toOrderList(url){
			//showMoreMenu2();
			loading('正在获取，请稍等...');
			setTimeout(function(){
				hideLoader();
				document.location=url+"&appId="+appId;				
			},1000);
		}
		
		function toOrderDetail(url){
			loading('正在获取，请稍等...');
			setTimeout(function(){
				hideLoader();
				document.location=url+"&appId="+appId;				
			},1000);
		}
		
		function toPay(orderId,orderNo,payType){
			//验证是否登录
			if(!checkLogin()) return;
			
			//判断是否为支付宝支付
			if(payType=="2"){
				document.location="ievent://payOrderByAlipay?orderId="+orderId;
			}else{
				loading('正在提交，请稍等...');
				setTimeout(function(){
					document.location="${ctxShop}/myorder/order/toPay?orderNo="+orderNo+"&userId=${userId}&appId="+appId;
				}, 2000);
			}
		}
	</script>
	<script type="text/javascript"> 
		$(document).ready(function() {
			//预加载图片
			startLoadImage();
		});
		function startLoadImage(){
			$(".displayImages").each(function(index){
				loadImage($(this).attr("id"),$(this).attr("path"),loadResult);
			});
		}
	</script>
	<script type="text/javascript"> 
		function iEventGetNavgitionInfo(){
			var result = {
				title:"我的订单",
			    leftBtn:{ 
			    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
					backFun:"iEventGoBack()"   //返回执行的事件，不带的话由iOS控制。
				},
				rightBtn:{
					bottons:[
						{
							type:1,			///0就是图片，1是文字,
							name:"联系客服",		//更多webNavMore.png 搜索webNavSearch.png
							fun:"iEventAppCustomService()"
						}
					]
				}            
			};
			if($global_isAndroid){
				window.control.onJsComplete(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		function iEventGoBack(){
			document.location="ievent://quitWebView";
		}
		function iEventShowMore(){
			showMoreMenu2();
		}
		function iEventAppCustomService(){
			document.location="ievent://appCustomService";
		}
	</script>
</head>
<body data-role="page">
	<div role="main" class="ui-content" style="padding:0px 0em 3em 0em;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<div data-role="header" class="ui-header" data-position="fixed" data-tap-toggle="false" style="border-bottom: 0px;">
			<div data-role="navbar" data-grid="c" style="text-align: center;line-height: 50px;">
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==1 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/myorder/list?userId=${user.id}&type=1')">全部</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==2 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/myorder/list?userId=${user.id}&type=2')">待付款</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==7 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/myorder/list?userId=${user.id}&type=7')">处理中</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==5 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/myorder/list?userId=${user.id}&type=5')">已完成</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==6 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/myorder/list?userId=${user.id}&type=6')">已取消</label>
				<label>
					<img src="${ctxFront }/images/orderWorkFlow/t${type}.png" height="20px" width="100%" style="margin-top: -10px"/></label>
			</div>
		</div>
		<form:form id="listForm" action="${ctxShop}/myorder/list" method="post" class="form-horizontal" style="padding:3.5em 1em 0em 1em;">
		<input type="hidden" id="mobile" name="mobile" value="${user.mobile }"/>
		<input type="hidden" id="username" name="username" value="${user.name }"/>
		<input type="hidden" id="userId" name="userId" value="${userId }"/>
		<input type="hidden" id="type" name="type" value="${type }"/>
		<tags:mbmessage content="${message}"/>
		<!--我的订单 -->
		<c:if test="${fn:length(orders)>0}">
		<c:forEach items="${orders}" var="order" varStatus="vs">
		<ul data-role="listview" data-inset="true" data-divider-theme="a" class="order-ui">
			<li data-role="list-divider">
				<div class="workflow-img">
					<!-- 待付款 -->
					<c:if test="${order.workflowNode==1}">
					<img src="${ctxFront }/images/orderWorkFlow/small/1.png" height="auto" width="100%"/>
					</c:if>
					<!-- 已支付，处理中 -->
					<c:if test="${order.workflowNode==2}">
					<img src="${ctxFront }/images/orderWorkFlow/small/2.png" height="auto" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中 -->
					<c:if test="${order.workflowNode==3}">
					<img src="${ctxFront }/images/orderWorkFlow/small/3.png" height="auto" width="100%"/>
					</c:if>
					<!-- 已支付，处理中，已指定送货员 -->
					<c:if test="${order.workflowNode==4}">
					<img src="${ctxFront }/images/orderWorkFlow/small/4.png" height="auto" width="100%"/>
					</c:if>
					<!-- 已支付，处理中，已指定送货员，配送中 -->
					<c:if test="${order.workflowNode==5}">
					<img src="${ctxFront }/images/orderWorkFlow/small/5.png" height="auto" width="100%"/>
					</c:if>
					<!-- 已支付，处理中，已指定送货员，配送中，已完成 -->
					<c:if test="${order.workflowNode==6}">
					<img src="${ctxFront }/images/orderWorkFlow/small/6.png" height="auto" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中，已指定送货员 -->
					<c:if test="${order.workflowNode==7}">
					<img src="${ctxFront }/images/orderWorkFlow/small/7.png" height="auto" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中，已指定送货员，配送中 -->
					<c:if test="${order.workflowNode==8}">
					<img src="${ctxFront }/images/orderWorkFlow/small/8.png" height="auto" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中，已指定送货员，配送中，已完成 -->
					<c:if test="${order.workflowNode==9}">
					<img src="${ctxFront }/images/orderWorkFlow/small/9.png" height="auto" width="100%"/>
					</c:if>
			    </div>
			</li>
			<li data-icon="false">
		    	<a href="javascript:" onclick="toOrderDetail('${ctxShop}/myorder/order/detail?orderNo=${order.orderNo }&userId=${userId }&type=${type }')">
		    		<div class="product-img" style="width: 108px; height: 80px; margin-top: 6px;">
				    	<img id="photo${vs.index }" class="displayImages" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${order.detailList[0].product.logoUrl }">
				    </div>
				    <p style="width: 55%;"><label class="float-left huise-color">${order.orderNo }</label></p>
				    <!-- 
				    <p>
				    <c:if test="${order.delFlag=='0' && order.payStatus=='0' && (order.payType=='2' or order.payType=='3' or order.payType=='4')}">
					<label class="float-left huise-color">待付款：</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType=='0' && ((order.payStatus=='0' && order.payType=='1') || (order.payStatus=='1' && order.payType!='1'))}">
					<label class="float-left huise-color">待发货</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType=='1'}">
					<label class="float-left huise-color">待收货</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType=='2'}">
					<label class="float-left huise-color">已完成</label>
				    </c:if>
				    <c:if test="${order.delFlag=='1'}">
					<label class="float-left huise-color">已取消</label>
				    </c:if>
				    </p>
				     -->
				    <p style="width: 55%;"><label class="float-left huise-color">要求送达时间：</label></p>
				    <p style="width: 55%;"><label class="float-left huise-color">${order.timeSlot.timeText }</label></p>
				    <p style="width: 58%;"><label id="detailAmount" class="float-right amount" style="margin-right: 1em;">￥${order.amount }</label></p>
		    		<!-- span class="float-right check_arrow_max"></span -->
		    	</a>
			    <p class="ui-li-aside" style="top: 78px; left: 133px; right: auto;">
			    	<c:if test="${order.delFlag=='0' && order.payStatus=='0' && order.payType!='1'}">
						<img alt="" src="${ctxFront }/images/shop/pay.png" height="20" style="margin: 0px;" onclick="toPay('${order.id }','${order.orderNo}','${order.payType }')">
					</c:if>
					<c:if test="${order.delFlag=='0' && order.orderType=='2'}">
						<label class="float-left huise-color">已完成</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType!='2' && order.payStatus=='0' && order.payType=='1' }">
						<label class="float-left huise-color">货到付款</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType!='2' && order.payStatus=='1'}">
						<label class="float-left huise-color">已付款</label>
				    </c:if>
				    <c:if test="${order.delFlag=='1'}">
						<label class="float-left huise-color">已取消</label>
				    </c:if>
			    </p>
		    </li>
		</ul>
		</c:forEach>
		</c:if>
		<c:if test="${fn:length(orders)==0}">
		<div class="cart-empty">
			<img alt="" src="${ctxFront }/images/shop/myorder/icon_7.png" width="60" height="60" style="vertical-align: middle;">&nbsp;没有查询到您的订单！
		</div>
		</c:if>
		</form:form>
	</div>
</body>
</html>
